<template>
  <!-- 隐患处理 延期申请-->
  <view class="container">
    <view class="background-white bor-top bottom">
      <cu-cell title="隐患编码：" title-width="160rpx" :description="detail.mangerCode" description-align="left">
      </cu-cell>
      <cu-cell title="隐患描述：" title-width="160rpx" :description="detail.managerDesc" description-align="left">
      </cu-cell>
      <cu-cell title="整改部门：" title-width="160rpx" :description="detail.dealDeptName" description-align="left">
      </cu-cell>
      <cu-cell
        title="任务派发："
        title-width="160rpx"
        :description="`${detail.dispatchTaskUserName} ${detail.dispatchTaskTime}`"
        description-align="left"
      >
      </cu-cell>
      <cu-cell
        title="整改节点："
        title-width="160rpx"
        :description="`${detail.chargePersonName} ${detail.planDealTime}`"
        description-align="left"
      >
      </cu-cell>
    </view>

    <view v-if="status === '4'">
      <uni-forms ref="reviewForm" :model-value="reviewForm" :rules="rules" labelWidth="70vw" labelPosition="top">
        <view class="background-white bor-top bottom">
          <uni-forms-item name="dealDelayTime" class="blank">
            <uni-datetime-picker
              hide-second
              :start="reviewForm.dealDelayTime || now"
              type="datetime"
              @change="onTimeChange($event, 'dealDelayTime')"
            >
              <cu-cell
                title="延期整改节点"
                required
                link
                placeholder="选择时间"
                :description="reviewForm.dealDelayTime"
              >
              </cu-cell>
              <span style="color: red">延期申请审核通过后，验收节点将同步顺延</span>
            </uni-datetime-picker>
          </uni-forms-item>
          <uni-forms-item name="dealDelayReason" label="延期原因">
            <textarea
              v-model="reviewForm.dealDelayReason"
              class="text-area"
              placeholder-class="placeholder__style"
              placeholder="请根据实际情况简要说明监控措施要求(限50字)"
              maxlength="50"
            />
          </uni-forms-item>
        </view>
      </uni-forms>
      <view class="submit-group">
        <button
          :style="{ pointerEvents: isDisabled ? 'none' : 'auto' }"
          @click="submit"
          class="u-button"
          :ripple="true"
        >
          提交延期申请
        </button>
      </view>
    </view>

    <view v-if="['11', '12'].includes(status)" class="background-white bor-top bottom">
      <cu-cell
        title="延期整改节点："
        title-width="210rpx"
        :description="detail.dealDelayTime"
        description-align="left"
      />
      <cu-cell title="延期原因：" title-width="160rpx" :description="detail.dealDelayReason" description-align="left" />
    </view>

    <view v-if="status === '11'">
      <view class="background-white bor-top bottom">
        <uni-forms ref="form" :modelValue="form" :rules="rules2" labelWidth="70vw" labelPosition="top">
          <uni-forms-item name="acceptanceResult" label="审核意见" class="acceptance" required>
            <uni-data-checkbox v-model="form.acceptanceResult" :localdata="opinions" />
          </uni-forms-item>
          <uni-forms-item v-if="form.acceptanceResult === 'N'" name="reason" label="不通过意见" required>
            <uni-easyinput type="textarea" v-model="form.reason" placeholder="简要说明不通过意见" maxlength="50" />
          </uni-forms-item>
          <uni-forms-item v-else name="dealDelayTime" label="确认延期整改节点">
            <uni-datetime-picker
              hide-second
              :start="form.dealDelayTime || detail.dealDelayTime"
              type="datetime"
              @change="onTimeChange($event, 'dealDelayTime')"
            >
              <cu-cell title="延期整改节点" required link placeholder="选择时间" :description="form.dealDelayTime" />
            </uni-datetime-picker>
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="submit-group">
        <button class="u-button" type="primary" :ripple="true" @click="approve">提交</button>
      </view>
    </view>

    <view v-if="status === '12'">
      <view class="background-white bor-top bottom">
        <cu-cell
          title="审核通过："
          title-width="160rpx"
          :description="`${detail.dealDelayAuditUserName} ${detail.dealDelayAuditTime}`"
          description-align="left"
        />
      </view>

      <view class="background-white bor-top bottom">
        <uni-forms ref="form" :modelValue="form" :rules="rules2" labelWidth="70vw" labelPosition="top">
          <uni-forms-item name="acceptanceResult" label="审批意见" class="acceptance" required>
            <uni-data-checkbox v-model="form.acceptanceResult" :localdata="opinions" />
          </uni-forms-item>
          <uni-forms-item v-if="form.acceptanceResult === 'N'" name="reason" label="不通过意见" required>
            <uni-easyinput type="textarea" v-model="form.reason" placeholder="简要说明不通过意见" maxlength="50" />
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="submit-group">
        <button class="u-button" type="primary" :ripple="true" @click="approve">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import CuCellSelect from '@/components/cu-cell/cu-cell-select.vue'
import dayjs from 'dayjs'
import { delayApply, delayApprove, delayInfo } from '../../../api/dbd/hiddenDangerDeal'

export default {
  components: {
    CuCellGroup,
    CuCellSelect,
    CuCell
  },
  data() {
    return {
      titleMap: {
        4: '隐患整改延期申请',
        11: '隐患整改延期审核',
        12: '隐患整改延期审批'
      },
      status: 1,
      managerId: '',
      detail: {},
      now: '',
      reviewForm: {
        dealDelayTime: '',
        dealDelayReason: ''
      },
      opinions: [
        {
          text: '通过',
          value: 'Y'
        },
        {
          text: '不通过',
          value: 'N'
        }
      ],
      form: {
        acceptanceResult: '',
        dealDelayTime: '',
        reason: ''
      },
      rules: {
        dealDelayTime: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            },
            {
              validateFunction: (rule, value, data, callback) => {
                let nowDate = dayjs(this.now).format('YYYY-MM-DD HH:mm')
                if (value && value < nowDate) {
                  return callback('时间不能小于当前时间')
                }
                return true
              }
            }
          ]
        },
        dealDelayReason: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        acceptanceResult: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        }
      },
      rules2: {
        acceptanceResult: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        reason: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            }
          ]
        },
        dealDelayTime: {
          rules: [
            {
              required: true,
              errorMessage: '必填项不能为空'
            },
            {
              validateFunction: (rule, value, data, callback) => {
                let nowDate = dayjs(this.now).format('YYYY-MM-DD HH:mm')
                if (value && value < nowDate) {
                  return callback('时间不能小于当前时间')
                }
                return true
              }
            }
          ]
        }
      },
      isDisabled: false
    }
  },
  onReady() {
    if (this.status === '4') this.$refs.reviewForm.setRules(this.rules)
    if (this.status === '11') this.$refs.form.setRules(this.rules2)
  },
  onLoad({ managerId, status }) {
    this.managerId = Number(managerId)
    this.status = status
    uni.setNavigationBarTitle({
      title: this.titleMap[status]
    })
    this.getDelayInfo(managerId)
  },
  methods: {
    setTime(minute) {
      let date = new Date()
      let m = date.getMinutes()
      date.setMinutes(m + minute)
      this.now = dayjs(date).format('YYYY-MM-DD HH:mm')
    },
    getDelayInfo(managerId) {
      delayInfo(managerId).then((res) => {
        this.detail = res.data
        this.setTime(res.data.delayMinDuration)
        this.form.dealDelayTime = res.data.dealDelayTime
      })
    },
    // 延期申请
    submit() {
      const eventChannel = this.getOpenerEventChannel()
      this.$refs.reviewForm.validate().then((res) => {
        this.isDisabled = true
        delayApply({
          ...this.reviewForm,
          managerId: this.managerId
        })
          .then(() => {
            this.$modal.msgSuccess('保存成功')
            // eventChannel.emit('reloadEvent', true);
            // uni.navigateBack({
            // 	delta: 1,
            // });

            uni.navigateTo({
              url: '/pages/work/hiddenDangerDeal/list'
            })
          })
          .catch((err) => {
            this.isDisabled = false
          })
      })
    },

    // 审核审批
    approve() {
      this.$refs.form.validate().then((res) => {
        delayApprove({
          ...this.form,
          managerId: this.managerId,
          operationCode: this.status === '11' ? '26' : '27'
        }).then(() => {
          this.$modal.msgSuccess('保存成功')
          // eventChannel.emit('reloadEvent', true);
          // uni.navigateBack({
          // 	delta: 1,
          // });

          uni.navigateTo({
            url: '/pages/work/hiddenDangerDeal/list'
          })
        })
      })
    },
    /**
     * 时间选择
     */
    onTimeChange(val, key) {
      if (val.trim().includes(' ')) {
        this.reviewForm[key] = val.trim()
        this.form[key] = val.trim()
      } else {
        this.$modal.showToast('请选择时间')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 200rpx;

  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }
  }
}

.approve-text {
  font-size: 30rpx;
  font-weight: 400;
  background: #ffffff;

  .approve {
    padding: 20rpx;
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.blank ::v-deep .uni-forms-item__label {
  display: none;
}
</style>
